<!--
 * @Author: only
 * @Date: 2025-01-21 10:12:11
 * @LastEditors: sueRimn
 * @LastEditTime: 2025-01-21 10:40:30
-->
<template>
   <div class="canvas-back">
      <canvas ref="myCanvas"/>
    </div>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      dots: [],
      width: 0,
      height: 0,
      animateTimer:null
    }
  },

  mounted() {
    this.$nextTick(()=>{
        this.ctx = this.$refs.myCanvas.getContext("2d");
        if (this.ctx) {
          this.ctx.strokeStyle = "rgba(255,255,255,1)";
          this.width = this.$refs.myCanvas.clientWidth;
          this.height = this.$refs.myCanvas.clientHeight;
          this.$refs.myCanvas.width = this.width;
          this.$refs.myCanvas.height = this.height;
          this.init(12, 8, this.width, this.height);
          this.animate();
        }
    })
  },
  distroyed() {
    if(this.animateTimer){
     cancelAnimationFrame(this.animateTimer);
    }

  },
  methods: {
     init(row, col, width, height){
      const step_row = height / (row - 2);
      const step_col = width / (col - 2);
      for (let i = 0; i < row; i++) {
        for (let j = 0; j < col; j++) {
          const temp = {
            x: j * step_col - step_col / 2, // 原始坐标x
            y: i * step_row - step_row / 2, // 原始坐标y
            sx: this.random(-step_row / 2, step_row / 2), // 当前偏移量x
            sy: this.random(-step_col / 2, step_col / 2), // 当前偏移量y
            dx: !!Math.round(this.random(0, 1)), // 当前方向x
            dy: !!Math.round(this.random(0, 1)), // 当前方向y
            color: this.random(20, 70), // b通道颜色值
            dcolor: !!Math.round(this.random(0, 1)), // 颜色改变向量
          };
          this.dots.push(temp);
        }
      }
    },
    drow(dots, row, col, ctx, width, height){
        ctx.fillRect(0, 0, width, height);
        for (let i = 0; i < row; i++) {
          for (let j = 0; j < col - 1; j++) {
            const k = i * col + j;
            const k1 = k + 1;
            const k2 = k + col;
            const k3 = k - col + 1;
            if (i <= row - 2) {
              ctx.beginPath();
              ctx.moveTo(dots[k].x + dots[k].sx, dots[k].y + dots[k].sy);
              ctx.lineTo(dots[k1].x + dots[k1].sx, dots[k1].y + dots[k1].sy);
              ctx.lineTo(dots[k2].x + dots[k2].sx, dots[k2].y + dots[k2].sy);
              ctx.closePath();
              const c = Math.round(
                (dots[k].color + dots[k1].color + dots[k2].color) / 3
              );
              ctx.fillStyle = `rgb(50,${Math.round(c / 1.3)},${c})`;
              ctx.fill();
            }
            if (i > 0) {
              ctx.beginPath();
              ctx.moveTo(dots[k].x + dots[k].sx, dots[k].y + dots[k].sy);
              ctx.lineTo(dots[k1].x + dots[k1].sx, dots[k1].y + dots[k1].sy);
              ctx.lineTo(dots[k3].x + dots[k3].sx, dots[k3].y + dots[k3].sy);
              ctx.closePath();
              const c = Math.round(
                (dots[k].color + dots[k1].color + dots[k3].color) / 3
              );
              ctx.fillStyle = `rgb(50, ${Math.round(c / 1.3)},${c})`;
              ctx.fill();
            }
          }
        }
    },
    random(min, max){
      return Math.random() * (max - min) + min;
    },
    animate(){
      const row = 12;
      const col = 8;
      const width = this.width;
      const height = this.height;
      const step_row = height / (row - 2);
      const step_col = width / (col - 2);

      this.dots.forEach(function (item) {
        if (item.dx) {
          // 增
          if (item.sx < step_col / 3) {
            item.sx += 0.1;
          } else {
            item.dx = !item.dx;
          }
        } else {
          // 减
          if (item.sx > -(step_col / 3)) {
            item.sx -= 0.1;
          } else {
            item.dx = !item.dx;
          }
        }

        if (item.dy) {
          // 增
          if (item.sy < step_row / 3) {
            item.sy += 0.1;
          } else {
            item.dy = !item.dy;
          }
        } else {
          // 减
          if (item.sy > -(step_row / 3)) {
            item.sy -= 0.1;
          } else {
            item.dy = !item.dy;
          }
        }

        /** 处理颜色变化 **/
        if (item.dcolor) {
          // 颜色变亮
          if (item.color < 80) {
            item.color += 0.4;
          } else {
            item.dcolor = !item.dcolor;
          }
        } else {
          if (item.color > 20) {
            item.color -= 0.4;
          } else {
            item.dcolor = !item.dcolor;
          }
        }
      });

      this.drow(this.dots, row, col, this.ctx, width, height);
      this.animateTimer = requestAnimationFrame(this.animate);
    }

  }
}
</script>

<style lang="scss" scoped>
.canvas-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  canvas {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    height: 100%;
    width: 100%;
    transform: translate(-50%, -50%);
  }
}

</style>
